<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <!--weui.min.css-->
    <link rel="stylesheet" type="text/css" href="__STATIC__/wechat/xydzp/css/weui.min.css">
    <!--jquery-weui.min.css-->
    <link rel="stylesheet" type="text/css" href="__STATIC__/wechat/xydzp/css/jquery-weui.min.css">
    <link rel="stylesheet" href="__STATIC__/wechat/xydzp/css/base.css" />
    <link rel="stylesheet" href="__STATIC__/wechat/xydzp/css/font.css" />
    <link rel="stylesheet" href="__STATIC__/wechat/xydzp/css/index.css" />
</head>
<body>
<div class="pageControl bg-4a1">
    <img class="img-response" src="__STATIC__/wechat/xydzp/images/jj1.png" alt="">
    <div class="pl">
        <img class="img-response" src="__STATIC__/wechat/xydzp/images/jj2.png" alt="">
        <div class="my_absolute my_title text-center">
            <p class="my_font">{$data.greeting}</p>
        </div>
    </div>
    <div class="pl">
        <img class="img-response" src="__STATIC__/wechat/xydzp/images/jj3.png" alt="">
    </div>
    <div class="pl">
        <img class="img-response" src="__STATIC__/wechat/xydzp/images/jj4.png" alt="">
        <div class="customization">
            <img src="__STATIC__/wechat/xydzp/images/jp1.png" id="diy1-img" style="display:none;" />
            <img src="__STATIC__/wechat/xydzp/images/jp2.png" id="diy2-img" style="display:none;" />
            <img src="__STATIC__/wechat/xydzp/images/jp3.png" id="diy3-img" style="display:none;" />
            <img src="__STATIC__/wechat/xydzp/images/jp4.png" id="diy4-img" style="display:none;" />
            <img src="__STATIC__/wechat/xydzp/images/jp5.png" id="diy5-img" style="display:none;" />
            <div class="banner">
                <div class="turnplate">
                    <canvas class="item" id="wheelcanvas"  width="422px" height="422px"></canvas>
                    <button class="pointer"><img src="__STATIC__/wechat/xydzp/images/cj4.png" alt=""></button>

                </div>
            </div>
        </div>
    </div>
    <div class="" style="margin-top: 3rem">
        <img class="img-response" src="__STATIC__/wechat/xydzp/images/jj5.png" alt="">
    </div>
    <div class="pl">
        <img class="img-response" src="__STATIC__/wechat/xydzp/images/jj6.png" alt="">
        <div class="my_absolute text-center">
            <p class="cl-f">您还有<span class="lotto_num">{$num}</span>次抽奖机会</p>
        </div>
    </div>
    <div class="pl">
        <img class="img-response" src="__STATIC__/wechat/xydzp/images/jj7.png" alt="">
        <div class="my_absolute">
            <div class="tab">
                <a href="0" class="cl-f">活动规则</a>
                <a href="1" class="cl-f">中奖纪录</a>
                <a href="2" class="cl-f">我的抽奖</a>
            </div>
        </div>
    </div>
    <div>
        <div class="bg-230 pl activity-main active" data-tab="0">
            <div class=" activity">
                {$data.rule}
            </div>
            <div class="activity-title">
                <img src="__STATIC__/wechat/xydzp/images/jj8.png" alt="">
            </div>
        </div>
        <div class="bg-230 pl activity-main" data-tab="1">
            <div class=" activity prize_list">
                {volist name="xydzp_prize_record" id="vo"}
                <p class="text-center cl-f">{$vo.create_time|date="Y-m-d H:i", ###} <span>{$vo.nickname} </span> 抽中 <span class="cl-d60">{$vo->prize->name}</span></p>
                {/volist}
            </div>
            <div class="activity-title">
                <img src="__STATIC__/wechat/xydzp/images/jj10.png" alt="">
            </div>
        </div>
        <div class="bg-230 pl activity-main" data-tab="2" style="display:block;">

            <div class=" activity">

                    <p class="text-center no-prize" {empty name="my_prize_record"}style="display: block;" {else /}style="display: none;" {/empty}>暂无中奖记录！</p>

                <div class="yes-prize" {empty name="my_prize_record"}style="display: none;" {else /}style="display: block;" {/empty}>
                    <p class="text-center cl-f my_prize_list" >
                        您抽中了本次活动的
                        {volist name="my_prize_record" id="vo"}
                        <span class="cl-d60">{$vo->prize->name}</span>
                        {/volist}
                    </p>
                    <p class="text-center">请提供您的收货地址</p>
                    <div class="flex-input">
                        <span>收货地址</span>
                        <input type="text" name="address" value="{$address.address|default=''}">
                    </div>
                    <div class="flex-input">
                        <span>收货姓名</span>
                        <input type="text" name="link_man" value="{$address.link_man|default=''}">
                    </div>
                    <div class="flex-input">
                        <span>联系方式</span>
                        <input type="text" name="mobile" value="{$address.mobile|default=''}">
                    </div>
                    <a href="javascript:;" class="cl-f activity_btn">提交</a>
                </div>
            </div>

            <div class="activity-title">
                <img src="__STATIC__/wechat/xydzp/images/jj11.png" alt="">
            </div>
        </div>
    </div>

    <div>
        <img src="__STATIC__/wechat/xydzp/images/jj9.png" alt="">
    </div>
</div>

<!-- jquery-2.1.4 -->
<script type="text/javascript" src="__STATIC__/wechat/xydzp/js/jquery-2.1.4.js"></script>
<!-- jquery-weui.min.js -->
<script type="text/javascript" src="__STATIC__/wechat/xydzp/js/jquery-weui.js"></script>
<script type="text/javascript" src="__STATIC__/wechat/xydzp/js/fastclick.js"></script>
<script type="text/javascript" src="__STATIC__/wechat/xydzp/js/awardRotate.js"></script>
<script>
    $(function() {
        FastClick.attach(document.body);
    });
</script>
<script>
    $('.activity-main').hide();
    $('.activity-main.active').show();
    $(function () {
        $('.tab').on('click','a',function (e) {
            e.preventDefault();
            var t=$(this).attr('href');
            $(`[data-tab='${t}']`).show().siblings().hide()
        });

        var turnplate={
            restaraunts:[],				//大转盘奖品名称
            colors:[],					//大转盘奖品区块对应背景颜色
            fontColor:[],               //字体颜色
            outsideRadius:192,			//大转盘外圆的半径
            textRadius:165,				//大转盘奖品位置距离圆心的距离
            insideRadius:40,			//大转盘内圆的半径
            startAngle:0,				//开始角度
            bRotate:false				//false:停止;ture:旋转
        };

        $(document).ready(function(){
            //动态添加大转盘的奖品与奖品区域背景颜色
            turnplate.restaraunts = [];
//                turnplate.restaraunts = ["一等奖(珍湘酒10件)", "二等奖(珍湘酒1件)", "三等奖(珍湘酒1瓶)", "谢谢惠顾"];
            {volist name="prize" id="vo"}
                turnplate.restaraunts.push('{$vo.name}');
            {/volist}
            turnplate.restaraunts.push('谢谢惠顾');
            turnplate.colors = ["#FFF8C5", "#94D7A7", "#FFF8C5", "#94D7A7"];
            turnplate.fontColor = ["#341262", "#3B66EA", "#FF7D35", "#fff"];

            //旋转转盘 item:奖品位置; txt：提示语;
            var rotateFn = function (item, txt){
                var angles = item * (360 / turnplate.restaraunts.length) - (360 / (turnplate.restaraunts.length*2));
                console.log(angles);
                if(angles<270){
                    angles = 270 - angles;
                }else{
                    angles = 360 - angles + 270;
                }
                $('#wheelcanvas').stopRotate();
                $('#wheelcanvas').rotate({
                    angle:0,
                    animateTo:angles+1800,
                    duration:8000,
                    callback:function (){
                        if (txt != '谢谢惠顾') {

                        } else {
                            txt = '智慧无价感谢参与';
                        }
                        alert(txt);
                        turnplate.bRotate = !turnplate.bRotate;
                        $('.pointer').removeAttr('disabled');

                    }
                });
            };

            var num = '{$num}';

            $('.pointer').click(function (){
                if (num <= 0) {
                    alert('无抽奖次数');
                    return false;
                }
                $.showLoading();
                $(this).attr('disabled', 'disabled');
                $.get('{:url("get_prize")}', {id : '{$data.id}'}, function (msg) {
                    $.hideLoading();
                    if (msg.code == 200) {
                        num--;
                        $(".lotto_num").text(num);
                        if (turnplate.bRotate)return;
                        turnplate.bRotate = !turnplate.bRotate;
                        //获取随机数(奖品个数范围内),item可以直接为数字
                        //var item = rnd(1,turnplate.restaraunts.length);
                        var item = msg.prize;
                        //奖品数量等于4,指针落在对应奖品区域的中心角度[45,135,225,315]
                        console.log(item);
                        rotateFn(item, turnplate.restaraunts[item-1]);
                        if (turnplate.restaraunts[item - 1] != '谢谢惠顾') {
                            $.post("{:url('save_prize_record')}", {id: '{$data.id}', prize_id: msg.prize_id}, function (msg) {
                                if (msg.code == 200) {
                                    $(".prize_list").prepend('<p class="text-center cl-f">'+msg.time+' <span>'+msg.nickname+' </span> 抽中 <span class="cl-d60">'+msg.prize_name+'</span></p>');
                                    $(".my_prize_list").append('<span class="cl-d60">'+msg.prize_name+'</span>');
                                    $(".yes-prize").show();
                                    $(".no-prize").hide();
                                } else {
                                    alert(msg.msg);
                                }
                            }, 'json');
                        }
                    } else {
                        alert(msg.msg);
                    }
                }, 'json');
            });
        });

        function rnd(n, m){
            var random = Math.floor(Math.random()*(m-n+1)+n);
            return random;
        }


//页面所有元素加载完毕后执行drawRouletteWheel()方法对转盘进行渲染
        window.onload=function(){
            drawRouletteWheel();
        };

        function drawRouletteWheel() {
            var canvas = document.getElementById("wheelcanvas");
            if (canvas.getContext) {
                //根据奖品个数计算圆周角度
                var arc = Math.PI / (turnplate.restaraunts.length/2);
                var ctx = canvas.getContext("2d");
                //在给定矩形内清空一个矩形
                ctx.clearRect(0,0,422,422);
                //strokeStyle 属性设置或返回用于笔触的颜色、渐变或模式
                ctx.strokeStyle = "#FFBE04";
                //font 属性设置或返回画布上文本内容的当前字体属性
                ctx.font = '14px Microsoft YaHei';
                for(var i = 0; i < turnplate.restaraunts.length; i++) {
                    var angle = turnplate.startAngle + i * arc;
                    ctx.fillStyle = turnplate.colors[i];
                    ctx.beginPath();
                    //arc(x,y,r,起始角,结束角,绘制方向) 方法创建弧/曲线（用于创建圆或部分圆）
                    ctx.arc(211, 211, turnplate.outsideRadius, angle, angle + arc, false);
                    ctx.arc(211, 211, turnplate.insideRadius, angle + arc, angle, true);
                    ctx.stroke();
                    ctx.fill();
                    //锁画布(为了保存之前的画布状态)
                    ctx.save();
                    //改变画布文字颜色
                    ctx.fillStyle = turnplate.fontColor[i];
                    //----绘制奖品开始----
                    var text = turnplate.restaraunts[i];
                    var line_height = 16;
                    //translate方法重新映射画布上的 (0,0) 位置
                    ctx.translate(211 + Math.cos(angle + arc / 2) * turnplate.textRadius, 211 + Math.sin(angle + arc / 2) * turnplate.textRadius);
                    //rotate方法旋转当前的绘图
                    ctx.rotate(angle + arc / 2 + Math.PI / 2);
                    //判断字符进行换行
                    if(text.indexOf("奖") > 0){
                        var texts = text.split("奖");
                        console.log(texts);
                        for(var j = 0; j<texts.length; j++){
                            ctx.font = j == 0?'.7rem Microsoft YaHei':' .7rem Microsoft YaHei';
                            if(j == 0){
                                ctx.fillText(texts[j]+"奖", -ctx.measureText(texts[j]+"奖").width / 2, j * line_height);
                            }else{
                                ctx.fillText(texts[j], -ctx.measureText(texts[j]).width / 2, j * line_height*1.2); //调整行间距
                            }
                        }
                    }else if(text.indexOf("奖") == -1 && text.length>8){ //奖品名称长度超过一定范围
                        text = text.substring(0,8)+"||"+text.substring(8);
                        var texts = text.split("||");
                        for(var j = 0; j<texts.length; j++){
                            ctx.fillText(texts[j], -ctx.measureText(texts[j]).width / 2, j * line_height);
                        }
                    }else{
                        ctx.fillText(text, -ctx.measureText(text).width / 2, 0);
                    }
                    //添加对应图标
                    if(text.indexOf(turnplate.restaraunts[0])>=0){
                        var img= document.getElementById("diy1-img");
                        img.onload=function(){
                            ctx.drawImage(img,-70,35,118,80);
                        };
                        ctx.drawImage(img,-70,35,118,80);
                    };
                    if(text.indexOf(turnplate.restaraunts[1])>=0){
                        var img= document.getElementById("diy2-img");
                        img.onload=function(){
                            ctx.drawImage(img,-30,35,58.1,80);
                        };
                        ctx.drawImage(img,-30,35,58.1,80);
                    };
                    if(text.indexOf(turnplate.restaraunts[2])>=0){
                        var img= document.getElementById("diy3-img");
                        img.onload=function(){
                            ctx.drawImage(img,-50,35,102.5,80);
                        };
                        ctx.drawImage(img,-55,35,102.5,80);
                    };
                    if(text.indexOf(turnplate.restaraunts[3])>=0){
                        var img= document.getElementById("diy5-img");
                        img.onload=function(){
                            ctx.drawImage(img,-25,20,54.3,80);
                        };
                        ctx.drawImage(img,-25,20,54.3,80);
                    };
                    ctx.restore();
                }
            }
        }

        $(".activity_btn").click(function () {
            var address = $('input[name="address"]').val();
            var link_man = $('input[name="link_man"]').val();
            var mobile = $('input[name="mobile"]').val();
            $.post('{:url("save_address")}', {address : address, link_man : link_man, mobile : mobile, xydzp_id : '{$data.id}'}, function (msg) {
                if (msg.code == 200) {
                    alert('保存成功！');
                } else {
                    alert(msg.msg);
                }
            }, 'json');
        });
    });
</script>
</body>
</html>